<script setup lang="ts">
import useIntervalRequest from '@/composables/hd/useIntervalRequest'
import { ElMessage } from 'element-plus'

const { send } = useMobileCode()
defineEmits(['update:mobile', 'update:code'])
const mobile = ref('')
const { exec, time } = useIntervalRequest(5, async () => {
  if (!/^\d{11}$/.test(mobile.value)) {
    ElMessage.error('手机格式错误')
  } else {
    send(mobile.value)
  }
})
</script>

<template>
  <main>
    <HdFormInput
      @update:modelValue="$emit('update:mobile', $event)"
      v-model="mobile"
      placeholder="请输入手机号"
      v-clearError="'mobile'" />
    <HdError name="mobile" />
    <div class="flex gap-1 mt-2">
      <HdFormInput
        placeholder="请输入验证码"
        @update:modelValue="$emit('update:code', $event)"
        @input="$emit('update:captcha', $event.target.value)" />
      <el-button disabled size="large" v-if="time">{{ time }}秒后操作</el-button>
      <el-button type="primary" size="large" @click="exec" v-else>发送验证码</el-button>
    </div>
    <HdError name="code" />
  </main>
</template>
<style lang="scss" scoped></style>
